<!--
 * @Author: xcl
 * @Date: 2022-04-20 18:05:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-09 10:25:37
 * @Description: 视频融合
-->
<template>
  <div>
    <cesium-map @fun="fun" :opt="opt" :type="2"></cesium-map>
  </div>
</template>

<script>
import CesiumMap from "@/components/map/CesiumMap.vue";
import * as turf from "@turf/turf";
import EllipsoidFade from "@/utils/effects/EllipsoidFade";
import Scanline from "@/utils/effects/Scanline";
import CircleWave from "@/utils/effects/CircleWave";
import HexagonSpread from "@/utils/effects/HexagonSpread";
import RaderScan from "@/utils/effects/RaderScan";
import SpreadWall from "@/utils/effects/SpreadWall";
export default {
  name: "CesiumEffects",
  components: {
    "cesium-map": CesiumMap,
  },
  data() {
    return {
      opt: {
        sceneModePicker: true,
        shouldAnimate: true,
        view: "113.93300450000001,22.492207202598358,1729.2928859524577,360,-28.6745520941544,360",
      },

      // 大型路网
      roadNetwork: [
        {
          id: 1,
          type: "FlyLines",
          width: 2,
          geojsonfile: "",
          effectimage: "",
          setup_param:
            '{"color":"#A932B4","height":3000,"speed":6,"percent":0.1,"gradient":0.1,"random":300,"startPoint_lng":113.8918,"startPoint_lat":22.4818,"endPoint_ing":113.96858,"endPoint_lat":22.5692}',
          showswitch: 1,
          createtime: 1632365596,
          updatetime: 1632817818,
        },
        {
          id: 3,
          type: "RoadPic",
          width: 1.7,
          geojsonfile:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/geojson/nanshan-road1.geojson",
          effectimage:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/pic/spriteline1.png",
          setup_param: '{"time":3600}',
          showswitch: 1,
          createtime: 1632812901,
          updatetime: 1632814947,
        },
        {
          id: 4,
          type: "RoadPic",
          width: 2,
          geojsonfile:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/geojson/nanshan-road2.geojson",
          effectimage:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/pic/spriteline2.png",
          setup_param: '{"time":3000}',
          showswitch: 1,
          createtime: 1632815020,
          updatetime: 1632815020,
        },
        {
          id: 5,
          type: "RoadPic",
          width: 1.6,
          geojsonfile:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/geojson/nanshan-road3.geojson",
          effectimage:
            "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/pic/spriteline3.png",
          setup_param: '{"time":600}',
          showswitch: 1,
          createtime: 1632815053,
          updatetime: 1632815053,
        },
      ],
      // 好看的点特效集合
      pointEffects: [
        // 深圳数字技术园
        {
          id: 13,
          effect_type: "CircleDiffusion", // 效果类型
          lon: 113.949164, // 经度
          lat: 22.534377, // 纬度
          height: 0, // 高度(米)
          onswitch: 1,
          color: "rgba(247, 235, 8, 1)", // 效果颜色
          radius: 1400, // 半径(米)
          duration: 9500, // 延迟(毫秒)
          // step步长 waveCount波浪条纹数 height效果墙高度 edgeCount多边形边数(0为圆形)
          ext: '{"waveCount":3,"step":-0.01,"height":500,"edgeCount":5 }',
          createtime: 1629702358,
          updatetime: 1636531409,
        },
        // 民政局
        {
          id: 14,
          effect_type: "Scanline",
          lon: 113.920835,
          lat: 22.534977,
          height: 0,
          onswitch: 1,
          color: "rgba(206, 19, 116, 0.91)",
          radius: 1200,
          duration: 6500,
          ext: '{"waveCount":3,"step":-0.01,"height":500,"edgeCount":5 }',
          createtime: 1629702548,
          updatetime: 1629977652,
        },
        // 中铁南方总部大厦
        {
          id: 15,
          effect_type: "CircleWave",
          lon: 113.940697,
          lat: 22.512139,
          height: 0,
          onswitch: 1,
          color: "rgba(31, 168, 227, 0.59)",
          radius: 400,
          duration: 4500,
          ext: '{"waveCount":4,"step":-0.01,"height":500,"edgeCount":5 }',
          createtime: 1629702655,
          updatetime: 1629977608,
        },
        // 广场
        {
          id: 16,
          effect_type: "HexagonSpread",
          lon: 113.924389,
          lat: 22.513738,
          height: 0,
          onswitch: 1,
          color: "rgba(255, 0, 183, 1)",
          radius: 800,
          duration: 3000,
          ext: '{"waveCount":3,"step":-0.01,"height":360,"edgeCount":0 }',
          createtime: 1629702824,
          updatetime: 1629977887,
        },
        // 诊所
        {
          id: 17,
          effect_type: "CircleScan",
          lon: 113.930919,
          lat: 22.507923,
          height: 0,
          onswitch: 1,
          color: "rgba(187, 0, 255, 1)",
          radius: 1000,
          duration: 3000,
          ext: '{"waveCount":3,"step":-0.01,"height":500,"edgeCount":5 }',
          createtime: 1629702906,
          updatetime: 1632819276,
        },
        // 东方科技大厦
        {
          id: 18,
          effect_type: "HexagonSpread",
          lon: 113.945813,
          lat: 22.547707,
          height: 0,
          onswitch: 1,
          color: "rgba(0, 153, 191, 1)",
          radius: 1000,
          duration: 7500,
          ext: '{"waveCount":3,"step":-0.01,"height":500,"edgeCount":5 }',
          createtime: 1629703112,
          updatetime: 1636528352,
        },
      ],
      // 模型
      modelData: [
        // 滨海之窗
        {
          id: 4,
          name: "旋转锥子",
          url: "https://mapv-data.oss-cn-hangzhou.aliyuncs.com/model/pyramid.glb",
          showswitch: 1,
          color: "rgba(59, 237, 207, 0.45)",
          colorModelist: "REPLACE",
          duration: 19,
          rotateSpeed: 6,
          latRotation: 3.76,
          positionLon: 113.935597,
          positionLat: 22.520329,
          height: 400,
          scale: 200,
          minimumPixelSize: 20,
          createtime: 1636531685,
          updatetime: 1636531777,
        },
      ],

      // 点位
      points: [
        {
          isShow: true, // 显隐
          id: 1, // 唯一性
          name: "滨海之窗", // label文本
          position: { lng: 113.935597, lat: 22.520329, height: 0 }, // 定位
          properties: {
            // 默认点位图片
            defaultImage: {
              base64: require("../../assets/images/rhombusBlue.png"), // base64
              height: 16, // 高度
              width: 16, // 宽度
            },
            // 激活点位图片
            activeImage: {
              base64: require("../../assets/images/map-select.png"), // base64
              height: 68, // 高度
              width: 48, // 宽度
            },
            // 点位信息窗口
            popupConfig: {
              width: 750, // 宽度
              height: 368, // 高度
            },
            // 额外信息
            extraData: {},
          },
          billboard: {
            scale: 2,
            distanceDisplayCondition:[5, 12000]
          }, // billboard的配置
          label: {
            pixelOffset: new Cesium.Cartesian2(0, -16 * 2 - 8),
            distanceDisplayCondition:[5, 12000]
          }, //label的配置
        },
        {
          isShow: true,
          id: 3,
          name: "广场",
          position: { lng: 113.924389, lat: 22.513738, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/exit.png"),
              height: 100,
              width: 80,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            distanceDisplayCondition:[5, 12000]
          },
        },
        {
          isShow: true,
          id: 4,
          name: "中铁南方总部大厦",
          position: { lng: 113.940697, lat: 22.512139, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/anti-float-normal.png"),
              height: 56,
              width: 56,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            distanceDisplayCondition:[5, 12000]
          },
        },
        {
          isShow: true,
          id: 2,
          name: "诊所",
          position: { lng: 113.930919, lat: 22.507923, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/septic-tank-num-s.png"),
              height: 54,
              width: 42,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            scale: 1.5,
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            pixelOffset: new Cesium.Cartesian2(0, (-54 * 1.5) / 2 + 4),
            outlineWidth: 1,
            font: "16px sans-serif",
            backgroundColor: new Cesium.Color(10 / 255, 17 / 255, 47 / 255, 0),
            distanceDisplayCondition:[5, 12000]
          },
        },
        {
          isShow: true,
          id: 5,
          name: "东方科技大厦",
          position: { lng: 113.945813, lat: 22.547707, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/more-6.png"),
              height: 180,
              width: 180,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            scale: 0.5,
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            pixelOffset: new Cesium.Cartesian2(0, -180 / 2 - 8),
            distanceDisplayCondition:[5, 12000]
          },
        },
        {
          isShow: true,
          id: 6,
          name: "民政局",
          position: { lng: 113.920835, lat: 22.534977, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/map-normal.png"),
              height: 56,
              width: 40,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            distanceDisplayCondition:[5, 12000]
          },
        },
        {
          isShow: true,
          id: 7,
          name: "深圳数字技术园",
          position: { lng: 113.949164, lat: 22.534377, height: 0 },
          properties: {
            defaultImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            activeImage: {
              base64: require("../../assets/images/map-select.png"),
              height: 68,
              width: 48,
            },
            popupConfig: {
              width: 750,
              height: 368,
            },
            apiData: {},
          },
          billboard: {
            distanceDisplayCondition:[5, 12000]
          },
          label: {
            distanceDisplayCondition:[5, 12000]
          },
        },
      ],
    };
  },
  props: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    fun(viewer, vm) {
      let self = this;
      this.eventInteraction(viewer);
      new CesiumGlobe().titlesetList(
        viewer,
        window.CesiumGlobeConfig.tileset,
        vm
      );
      new CesiumGlobe().roadNetwork(viewer, turf, self.roadNetwork, vm);

      const effectsManager = {
        EllipsoidFade: EllipsoidFade,
        Scanline: Scanline,
        CircleWave: CircleWave,
        HexagonSpread: HexagonSpread,
        RaderScan: RaderScan,
        SpreadWall: SpreadWall,
      };
      new CesiumGlobe().pointEffectArray(
        viewer,
        self.pointEffects,
        effectsManager,
        vm
      );
      new CesiumGlobe().pimitiveModelList(viewer, self.modelData, vm);

      new CesiumGlobe().addBillboard(viewer, self.points, "Effects", vm);
      new CesiumGlobe().addLabel(viewer, self.points, "Effects", vm);
    },

    /**
     * 事件交互（鼠标移动和点击）
     * @param {*} viewer
     */
    eventInteraction(viewer) {
      let self = this;
      let handler;
      if (handler != undefined) {
        ShapeEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.MOUSE_MOVE
        );
        ShapeEventHandler.removeInputAction(
          Cesium.ScreenSpaceEventType.LEFT_CLICK
        );
      }
      handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

      // 移动
      handler.setInputAction(function (event) {
        // 有值时，表示正在进行路径演示，由于其与交互事件有冲突，故不执行以下内容
        if (viewer.trackedEntity) {
          return;
        }

        // console.log("移动事件：", event);
        var pick = viewer.scene.pick(event.endPosition);
        // console.log(pick)

        if (Cesium.defined(pick)) {
          // 显式渲染一个帧 (提升性能)
          viewer.scene.requestRender();
          // 选中了要素
          viewer._container.style.cursor = "pointer";
        } else {
          // 未选中任何要素
          viewer._container.style.cursor = "default";
        }
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

      // 点击
      handler.setInputAction(function (event) {
        // 有值时，表示正在进行路径演示，由于其与交互事件有冲突，故不执行以下内容
        if (viewer.trackedEntity) {
          return;
        }

        // console.log("点击事件：", event);
        var pick = viewer.scene.pick(event.position);
        // console.log(pick)

        if (Cesium.defined(pick)) {
        } else {
        }

        if (!(window.CesiumGlobeConfig.opt && CesiumGlobeConfig.opt.debug)) {
          return;
        }

        /**
         * 1. 拾取地形高度/海拔、位置信息、经纬度数
         * 2. 拾取摄像机相关参数
         */
        const pickRay = viewer.camera.getPickRay(event.position);
        var cartesian = viewer.scene.globe.pick(pickRay, viewer.scene);
        // 拾取地形高度/海拔、位置信息、经纬度
        if (cartesian !== undefined) {
          var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let earthPosition = viewer.camera.pickEllipsoid(
            event.position,
            viewer.scene.globe.ellipsoid
          );
          console.log("位置信息1：", earthPosition);
          var maplnglat =
            viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian);
          console.log("位置信息2：", maplnglat);
          if (Cesium.defined(earthPosition)) {
            let lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
            let lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
            console.log("位置信息3 - 经纬度：", lon, lat);
            let height = viewer.scene.globe.getHeight(cartographic).toFixed(3);
            console.log("地形高度/海拔：", height);
          }
        }
        // 拾取摄像机相关参数
        if (true) {
          let cheight = viewer.camera.positionCartographic.height.toFixed(2);
          console.log("相机高度：", cheight);
          let bestView = {
            position: {
              x: viewer.camera.positionWC.x,
              y: viewer.camera.positionWC.y,
              z: viewer.camera.positionWC.z,
            },
            // 方向 围绕Z轴旋转
            heading: Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2),
            // 倾斜角度 围绕Y轴旋转
            pitch: Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2),
            // 围绕X轴旋转
            roll: Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2),
          };
          console.log("相机当前位置参数：", JSON.stringify(bestView));
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
